<template>
	<view class="member-box">
		<!-- 头部文字 -->
		<view class="logo-member">
			<view class="logo">
				<image src="/static/home/logo.svg" mode=""></image>
				<text>HoloCare</text>
			</view>
			<text class="h1">唯医健康会员</text>
			<view class="stext">
				<text>深度整合医疗资源&ensp;提供全方位健康呵护</text>
			</view>
			<view class="check-box">
				<view class="inside-box" v-for="(item, index) in checkList" :key="index">
					<view class="icon">
						<uv-icon name="checkbox-mark" size="12"></uv-icon>
					</view>
					<text>{{item}}</text>
				</view>
			</view>
		</view>
		<!-- 跳转按钮 -->
		<view class="navigator-button">
			<view class="button-default active-button">
				<text>全国医生</text>
				<text>在线问诊享9折</text>
			</view>
			<view class="button-default">
				<text>家庭医生</text>
				<text>全家/新生儿/老人</text>
			</view>
			<view class="button-default">
				<text>专科医生</text>
				<text>儿童/女性/老人</text>
			</view>
		</view>
		
		<!-- vipcom -->
		<vipCom class="vip-com" bgi="linear-gradient(90deg,#feedd3,#f7d5a1)" fc="#8c4e21" img="/图片素材/member/vip1.png">
			<template #h1>
				健康VIP
			</template>
			<template #h2>
				·多重专享特权 一人开卡全家享·
			</template>
			<template #h3>
				HEALTH VIP
			</template>
			<template #title>
				健康VIP会员
			</template>
			<template #desc1>
				·专家放号
			</template>
			<template #desc2>
				·专家闸诊享85折 100元封顶
			</template>
			<template #price>
				19
			</template>
		</vipCom>
		<vipCom class="vip-com" bgi="linear-gradient(90deg,#ffe6e3,#ffd2c9)" fc="#c04536" img="/图片素材/member/vip2.png" bgi2="linear-gradient(90deg,#dbf5f5,#aadae5)" fc2="#56969f" img2="/图片素材/member/vip3.png">
			<template #h1>
				家享会员
			</template>
			<template #h2>
				·三甲家庭医师 在线不限次问诊·
			</template>
			<template #h3>
				HOME MEMRERSHIP
			</template>
			<template #title>
				全年家庭医生管护
			</template>
			<template #desc1>
				·三甲医生有求必应7*24小时全天响应
			</template>
			<template #desc2>
				·会员制管家式服务全家6人一管到底
			</template>
			<template #price>
				1999
			</template>
			<template #title2>
				居家线上咨询
			</template>
			<template #desc3>
				·1V1三甲医生私人服务
			</template>
			<template #desc4>
				·线上享不限次图文+语音问诊
			</template>
			<template #price2>
				99
			</template>
		</vipCom>
		<vipCom class="vip-com" bgi="linear-gradient(90deg,#ffe6ec,#fabecd)" fc="#da5a77" img="/图片素材/member/vip4.png" bgi2="linear-gradient(90deg,#ffe6ec,#fabecd)" fc2="#da5a77" img2="/图片素材/member/vip5.png">
			<template #h1>
				专科医生
			</template>
			<template #h2>
				·专业健康咨询  精准病情指导·
			</template>
			<template #h3>
				SPECIALIST
			</template>
			<template #title>
				乳腺癌用药咨询
			</template>
			<template #desc1>
				·原研进口药瑞宁得(港版) 1个月保供
			</template>
			<template #desc2>
				·肿瘤科医生不限次免费指导
			</template>
			<template #price>
				9.9
			</template>
			<template #title2>
				女性健康问题咨询
			</template>
			<template #desc3>
				·线上问诊不限次
			</template>
			<template #desc4>
				·三甲名医专业咨询
			</template>
			<template #price2>
				49.9
			</template>
		</vipCom>
		
		<!-- 版权 -->
		<view class="copy-view">
			<view class="t1"><text>企业合作垂询</text></view>
			<view class="t2">
				<image src="/图片素材/member/邮箱.png" mode=""></image>
				<text>E-mail: YYDeEGan@163.com</text>
			</view>
			<view class="t3">HoloCare 期 待 与 您 精 诚 合 作，共 创 共 赢 !</view>
			<view class="t4">-&ensp;您&ensp;的&ensp;健&ensp;康&emsp;&emsp;我&ensp;们&ensp;的&ensp;责&ensp;任&ensp;-</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const checkList = ref(['多元服务','海量医生','专业可靠','便捷高效','全程管理'])
</script>

<style scoped lang="scss">
	
	.member-box{
		background-color: #2283f4;
		padding: 23rpx;
		padding-top: 120rpx;
		color: white;
		.logo-member{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.logo{
				image{
					width: 38rpx;
					height: 32rpx;
					margin-right: 6rpx;
				}
				text{
					font-size: 40rpx;
				}
			}
			.h1{
				font-size: 72rpx;
				font-weight: bold;
			}
			.stext{
				margin-top: 16rpx;
				color: #3f86ff;
				font-size: 30rpx;
				letter-spacing: 3rpx;
				background-color: #fff;
				border-radius: 30rpx;
				line-height: 1;
				padding: 6rpx 30rpx;
			}
			.check-box{
				display: flex;
				margin: 26rpx 0 30rpx;
				justify-content: space-between;
				width: 100%;
				.inside-box{
					display: flex;
					align-items: center;
					text{
						font-size: 24rpx
					}
					.icon{
						width: 28rpx;
						height: 28rpx;
						border-radius: 50%;
						background-color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 4rpx;
					}
				}
			}
		}
		.navigator-button {
			display: flex;
			justify-content: space-between;
			.button-default{
				width: 226rpx;
				height: 98rpx;
				background: linear-gradient(180deg, rgba(197, 225, 255, 1) 0%, rgba(121, 183, 254, 1) 100%);
				border-radius: 10rpx;
				box-shadow: 0px 3px 3px rgba(11, 92, 192, 0.6);
				font-size: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				line-height: 1;
				text:first-of-type{
					color: #0b5cc0;
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 8rpx;
				}
				text:last-child{
					color: #0b5fc2;
				}
			}
			.active-button{
				background: linear-gradient(180deg, rgba(252, 167, 152, 1) 0%, rgba(213, 64, 39, 1) 100%);
				text{
					color: white !important;
				}
			}
			
		}
		.vip-com{
			margin-top: 40rpx;
		}
		.copy-view {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			margin: 40rpx 0 120rpx;
			.t1{
				border: 1px solid #fff;
				padding: 6rpx 30rpx;
				line-height: 1;
				border-radius: 40rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				text{
					letter-spacing: 10rpx;
				}
			}
			.t2{
				margin-bottom: 8rpx;
				display: flex;
				align-items: center;
				image{
					width: 26rpx;
					height: 26rpx;
					margin-right: 6rpx;
				}
				text{
					line-height: 1;
				}
			}
			.t4{
				margin: 60rpx 0;
			}
		}
	}
	
</style>
